import './App.scss';
import { Route, NavLink, Routes, useLocation } from "react-router-dom";

import Self from './views/Shelf/Shelf';
import Home from './views/Home/Home';
import Categray from './views/Categray/Categray';
import Mine from './views/Mine/Mine';
import BookDetail from './views/BookDetail/BookDetail';
import BookChapter from './views/BookChapter/BookChapter';
import BookRead from './views/BookRead/BookRead';
// search
import BookSearch from './views/BookSearch/BookSearch';
import BookSuccess from './views/BookSuccess/BookSuccess';
import HomeRank from './views/HomeRank/HomeRank';

function App() {
  let location = useLocation();
  console.log('地址--->', location);
  return (
    <div className="App">
      <Routes>
        <Route path='Self' element={<Self />} />
        <Route path='/' >
          <Route index element={<Home />}></Route>
          <Route path='Search' element={<BookSearch />}></Route>
          <Route path='Success' element={<BookSuccess />}></Route>
          <Route path='Rank' element={<HomeRank />}></Route>
        </Route>
        <Route path='Categray' element={<Categray />} />
        <Route path='Mine' element={<Mine />} />
        {/* 相对路由 */}
        <Route path='Book'>
          <Route index element={<BookDetail />}></Route>
          <Route path='Chapter' element={<BookChapter />}></Route>
          <Route path='Read' element={<BookRead />}></Route>
        </Route>
      </Routes>
      {/* tabbar */}
      {location.pathname.match(/^(\/|\/self|\/categray|\/mine)$/i) && (
        <footer className="tab_bar">
          <NavLink to="/self">书架</NavLink>
          <NavLink to="/">书城</NavLink>
          <NavLink to="/categray">分类</NavLink>
          <NavLink to="/mine">我的</NavLink>
        </footer>
      )}

    </div>
  );
}

export default App;
